<template>
  <div style="display: flex; flex-direction: row;">
    <div class="cen">
      <el-card class="box-card">
        <div class="block" style="margin-left: 10%;margin-right:10%;">
          <el-carousel indicator-position="outside" interval="2000">
            <el-carousel-item v-for="(photo, index) in photos" :key="index">
              <el-image
                style="width: 100%; height: 100%"
                :src="photo"
                fit="fill"
                @click="myClick"
              >
              </el-image>
            </el-carousel-item>
          </el-carousel>
        </div>
        <el-divider content-position="left">我们的青春</el-divider>
        <div align="center">
          <h3>我们的青春</h3>
          <h7
            >青春不是年华，而是心境，是心态。每一个在青春里拼劲全力的用心的人，都是最勇敢的战士<br />
            青春是校园:一场有一场的考试，突然出现门后的班主任，跑过、跳过、闹过的操场<br />
            青春是友谊:我们偷偷摸摸传过的纸条，一时冲动打过的群架，和同桌的你<br />
            青春是爱情:那个扎着马尾辫的女孩，那个在球场挥洒汗水的少年。只微微一笑，就能明媚了你整个青春<br />
            青春是叛逆:第一次逃课，喝酒，和父母顶撞，明明后悔，却总是不肯服输的执拗，青春允许犯错，跌倒，反悔——一切都来得及<br />
            青春是梦想:一心追梦，奋不顾身，哪怕万难千阻……决不投降<br />
            青春是勇敢:成长并不容易，有本事受伤，就要有本事坚强，拼尽全力才是勇敢的战士<br />
            青春是远方:有诗、有远方，春暖花开终将启程，同稚嫩告别，拥抱，探索这美好又复杂的世界<br />
            青春是担当:青春是成长，更是担当，要相信自己，不断淬炼自己，定能把这个世界变得更美更好<br />
            青春还是坚持:无论如何艰难，无论再多坎坷，一定要继续我们的精彩，通过努力让自己光芒万丈。<br />
            不放弃，正青春</h7
          >
        </div>
        <el-divider content-position="right">我们的青春</el-divider>
        <!-- <vue-scroll :ops="ops" style="width:100%;height:100%">
			    </vue-scroll> -->
      </el-card>
    </div>

    <div class="right">
      <div style="background-color: #efd9ce;">
        <div style="display: flex;flex-direction: column;">
          <div
            style="margin: 5px;cursor:pointer"
            v-for="(item, index) in board"
            :key="index"
            @click="
              clickboard(item.title, item.content, item.time, item.author)
            "
          >
            <div slot="header" class="clearfix">
              <span
                class="type iconfont icon-laba_bg jinji"
                v-if="item.type == 1"
              >
              </span>
              <span
                class="type iconfont icon-labaguangbo_bg no"
                v-if="item.type == 0"
              >
              </span>
              <div class="boardtitle">{{ item.title }}</div>
              <div class="content">{{ item.content }}</div>
              <span class="time">{{ item.time }}</span>
            </div>
          </div>
        </div>
      </div>
      <el-dialog
        title="公告详情"
        :visible.sync="dialogVisible"
        width="35%"
        :show-close="true"
      >
        <div class="boarditemtitle">{{ boardItem.title }}</div>
        <div class="boardItemcontent">{{ boardItem.content }}</div>
        <div class="boardItemauthor">发布者:{{ boardItem.author }}</div>
        <div class="boardItemtime">{{ boardItem.time }}</div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      photos: [
        "http://localhost:8090/lunbo1.png",
        "http://localhost:8090/lunbo2.png",
        "http://localhost:8090/lunbo3.png",


      ],
      icon: "",
      boardItem: {
        title: "",
        content: "",
        time: "",
        author: "",
      },
      board: [],
      dialogVisible: false,
    };
  },
  mounted() {
    this.getBoard();
  },
  methods: {
    myClick() {
      alert("点击成功");
    },
    getBoard() {
      this.$http.get("http://localhost:8090/Board/find").then((res) => {
        this.board = res.data;
      });
    },
    clickboard(title, content, time, author) {
      this.boardItem.title = title;
      this.boardItem.content = content;
      this.boardItem.time = time;
      this.boardItem.author = author;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.cen {
  width: 1050px;
  margin-right: 10px;
  margin-left: 10px;
}

.right {
  width: 200px;
  margin-right: 10px;
  margin-left: 10px;
}
.clearfix {
  position: relative;
  background-color: #fff;
  height: 100px;
  padding: 10px;
}
.type {
  position: absolute;
  top: 2px;
  right: 2px;
}
.boardtitle {
  margin-top: 3px;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}
.content {
  height: 35px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 12px;
}
.time {
  font-size: 10px;
  color: gray;
  position: absolute;
  bottom: 3px;
  right: 3px;
}

/* boarditem */
.boardItemtime,
.boardItemauthor {
  text-align: right;
}
.boardItemauthor {
  margin-top: 14px;
}
.boardItemtime {
  margin-top: 10px;
}
.boarditemtitle {
  text-align: center;
  font-weight: 600;
  margin-bottom: 30px;
}
.jinji {
  color: red;
}
.no {
  color: blue;
}
</style>
